<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div class="box2">
            <div class="box1">1</div>
            <div class="box4">2</div>
            <div class="box5">5</div>
        </div>
        <div class="box3">3</div>
    </div>

    <script>
        // document由节点构成 节点包含 元素标签 空格换行....
        // 节点 ：node  元素 ：element
        // 一、子关系；
        
        var box2 = document.querySelector(".box2");
    //     // 1.子节点：获取所有的子节点  元素.childNodes
    //     // var eles = box2.childNodes;
    //     // console.log(eles);

    //     // 2.子元素: 获取所有的子元素 元素.children;
    //    // console.log(  box2.children);

            // 3.获取到第一个子元素 firstElementChild
            // document.onclick = function(){
            //     console.log(box2.firstElementChild)
            // }
            // 4.获取第一个子节点firstChild
            // document.onclick = function(){
            //     console.log(box2.firstChild)
            // }

            // 5.获取最后一个子元素lastElementChild
            // document.onclick = function(){
            //     console.log(box2.lastElementChild);
            // }
            // 6.获取最后一个子节点 :lastChild;
            document.onclick = function(){
                console.log(box2.lastChild);
            }
           


// 总结： 1.所有的子元素 2.所有的子节点 3.第一个子元素 4.第一个子节点 5.最后一个子元素 6.最后一个子节点




    </script>
</body>

</html>